<template>
  <div class="articlepublish">
    <!-- 路径导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章发布</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 时间卡片组件 -->
    <el-card class="box-card" style="margin-top: 25px">
      <!-- 表单 -->
      <el-form
        :label-position="labelPosition"
        label-width="50px"
        :model="postinfo"
      >
        <!-- 输入框 -->
        <el-form-item label="标题">
          <el-input v-model="postinfo.title"></el-input>
        </el-form-item>
        <!-- 单选按钮组 -->
        <!-- label:当用户选择某个单选按钮的时候，会获取到这个label值，它相当于这个单选按钮的实际值 -->
        <!-- v-model ：当用户选择某个单选按钮的后，会自动的将label的值赋值给v-model所绑定的属性 -->
        <el-form-item label="类型">
          <el-radio-group v-model="postinfo.type">
            <el-radio label="1">文章</el-radio>
            <el-radio label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 富文本框 -->
        <el-form-item label="内容">
          <!-- 如果类型为文章，则显示富文本框 -->
          <VueEditor
            :config="config"
            v-model="postinfo.content"
            ref="vueEditor"
            v-if="postinfo.type == 1"
          />
          <!-- 如果类型为视频，则显示上传视频功能-->
          <el-upload
            class="upload-demo"
            :action="baseUrl + '/upload'"
            v-if="postinfo.type == 2"
            :headers="getToken()"
            :on-success="handlevideoSuccess"
            :file-list="fileList"
            :before-upload="beforeupload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传视频文件，且不超过12M
            </div>
          </el-upload>
        </el-form-item>
        <!-- 复选框 -->
        <el-form-item label="栏目">
          <!-- indeterminate	设置不确定 状态，只负责样式控制	boolean -->
          <!-- v-model        绑定值-->
          <!-- change  当绑定值变化时触发的事件 -->
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <!-- v-model        绑定值 array-->
          <!-- change  当绑定值变化时触发的事件 -->
          <el-checkbox-group
            v-model="usercategory"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="(v, i) in categoryList"
              :label="v.id"
              :key="i"
              >{{ v.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>

        <!-- 封面 -->
        <el-form-item label="封面">
          <!-- action	必选参数，上传的地址 -->
          <!-- on-preview 点击文件预览时触发 -->
          <!-- on-remove 文件列表移除文件时触发 -->
          <!-- on-success 文件上传成功时触发 -->
          <!-- headers 设置上传的请求头部 -->
          <!-- limit  最大允许上传个数 number -->
          <!-- on-exceed 文件超出个数限制时触发 -->
          <el-upload
            :action="baseUrl + '/upload'"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :headers="getToken()"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="publishPost">发布</el-button>
    </el-card>
  </div>
</template>

<script>
// 富文本框
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
import { getCateList, publishPost } from "../api/article";
// 引入基准路径;
import axios from "../utils/myaxios";
export default {
  data() {
    return {
      // 复选框
      checkAll: false,
      usercategory: [], // 用户所选栏目、数组里面的元素为 显示到页面中为默认选中状态
      categoryList: [], //所有栏目数据
      isIndeterminate: false,

      labelPosition: "right",
      postinfo: {
        title: "",
        type: "1",
        content: "",
        cover: [],
        categories: [],
      },
      //   富文本框 配置
      //   **文件上传到服务器、接收服务器返回的路径，路径填充到页面中**
      config: {
        // 上传图片的配置
        uploadImage: {
          url: axios.defaults.baseURL + "/upload", // 文章上传的服务器端的处理路径
          name: "file", //后台所需要的参数名称
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          //文件上传成功之后的回调
          uploadSuccess(res, insert) {
            // console.log(res);路径需看清楚后台返回的层次结构
            insert(axios.defaults.baseURL + res.data.data.url);
          },

          headers: this.getToken(),
        },
        // 我们所使用的组件，可以实现文件的上传，但是，并没有使用我们自己封装的axios，而是内部自己封装了异步操作，异味这我们添加的拦截器，它根本不会经过，所以我们需要使用组件内置的和headers来实现token的传递
        // 上传视频的配置
        uploadVideo: {
          url: axios.defaults.baseURL + "/upload",
          name: "file",
          uploadSuccess(res, insert) {
            console.log(res);
            insert(axios.defaults.baseURL + res.data.url);
          },
          headers: this.getToken(),
        },
      },
      //  封面模块 文件上传图片预览
      dialogImageUrl: "",
      dialogVisible: false,
      baseUrl: axios.defaults.baseURL,
      fileList: [],
      fileType: ["video.mp4", "video.avi"],
    };
  },
  async mounted() {
    // 获取栏目列表
    let res = await getCateList();
    // console.log(res.data.data);
    this.categoryList = res.data.data.splice(2);
    console.log(this.categoryList);
  },
  components: {
    VueEditor,
  },
  methods: {
    // 复选框事件
    // 全选按钮改变时触发
    handleCheckAllChange(val) {
      //   console.log(val); //true /false
      //  默认选中状态 进行改变
      this.usercategory = val
        ? this.categoryList.map((v) => {
            return v.id;
          })
        : [];
      this.isIndeterminate = false;
    },

    // 复选框按钮改变时触发
    handleCheckedCitiesChange(value) {
      //  console.log(value); //所选栏目合集
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.categoryList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.categoryList.length;
    },

    async publishPost() {
      // 富文本框内容获取
      if (this.postinfo.type == 1) {
        let quill = this.$refs.vueEditor.editor;
        this.postinfo.content = quill.root.innerHTML;
      }
      this.postinfo.categories = this.usercategory.map((v) => {
        return { id: v };
      });

      // console.log(this.postinfo);
      let res = await publishPost(this.postinfo);
      console.log(res);
      console.log(res);
      if (res.data.message === "文章发布成功") {
        this.$message.success("文章发布成功");
        this.$router.push({ name: "aiticleList" });
      }
    },
    getToken() {
      let token = JSON.parse(localStorage.getItem("heima_manager")).token;
      return { Authorization: token };
    },
    //  封面模块 事件处理
    //    <!-- on-preview 点击文件预览时触发 -->
    handlePictureCardPreview(file) {
      console.log(1);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //       <!-- on-remove 文件列表移除文件时触发 -->
    // 移除封面:重点是将对应的图片数据从postForm.cover移除
    handleRemove(file, fileList) {
      // console.log(file, fileList); // file 是移出的图片id {id:1} fileList是剩余的图片id组合

      let index = this.postinfo.cover.findIndex((value, index, arr) => {
        return value.id == file.response.data.id;
      });
      console.log(index);
      this.postinfo.cover.splice(index, 1);
      console.log(this.postinfo.cover);
    },
    //   <!-- on-success 文件上传成功时触发 -->
    handleSuccess(response, file, fileList) {
      //   console.log(response, file, fileList);
      this.postinfo.cover.push({ id: response.data.id });
      console.log(this.postinfo.cover);
    },
    // 文件超出个数限制时触发
    handleExceed() {
      this.$message.warning("最多上传3张");
    },
    // 视频文件上传
    handlevideoSuccess(response, file, fileList) {
      //   console.log(response);
      this.postinfo.content = this.baseUrl + response.data.url;
      //   console.log(this.postinfo.content);
    },
    // 视频上传前  视频格式的检查
    beforeupload(file) {
      console.log(file);
      if (this.fileType.indexOf(file.type) == -1) {
        alert("类型不对");
        return false;
      } else if (file.size / 1024 / 1024 > 80) {
        alert("太大了");
        return false;
      }
    },
  },
};
</script>

<style>
</style>